<template>
    <!--头像与用户名----------->
    <div class="divStyle divStyle1" style="margin-bottom: 40px">
        <img class="imgStyle" src="../../assets/user/avatar.png" />
        <p class="userNameStyle">April</p>
    </div>
    <!--菜单栏---------------->
    <div v-for="item of sideData" :key="item.menuName">
        <router-link :to="item.to">
            <div class="divStyle" :class="[item.to == selectPath ? 'divSelect1' : 'divSelect2']">
                <div style="padding: 12px 5px">
                    <div class="iconStyle" v-if="item.icon == 'DollarCircleOutlined'">
                        <DollarCircleOutlined />
                    </div>
                    <div class="iconStyle" v-if="item.icon == 'BarChartOutlined'">
                        <BarChartOutlined />
                    </div>
                    <div class="iconStyle" v-if="item.icon == 'SettingOutlined'">
                        <SettingOutlined />
                    </div>
                    <div class="iconStyle" v-if="item.icon == 'InfoCircleOutlined'">
                        <InfoCircleOutlined />
                    </div>
                    <p class="pStyle">{{ item.menuName }}</p>
                </div>
            </div>
        </router-link>
    </div>

    <!--账本栏------------------->
    <div class="divStyle" style="margin-top: 40px">
        <p style="float: left; color: #8b8b8b; margin-top: 5px">账本</p>
        <a-button type="primary" shape="circle" style="float: right">
            <template #icon>
                <PlusOutlined />
            </template>
        </a-button>
    </div>

    <div class="divSelect2 divStyle">
        <div style="padding: 12px 5px">
            <div class="iconStyle">
                <BookTwoTone />
            </div>
            <p style="margin: 0">默认账本</p>
        </div>
    </div>
    <div class="divSelect2 divStyle">
        <div style="padding: 12px 5px">
            <div class="iconStyle">
                <BookTwoTone twoToneColor="#eb2f96" />
            </div>
            <p style="margin: 0">新的账本</p>
        </div>
    </div>
</template>

<script>
import {
    DollarCircleOutlined,
    PlusOutlined,
    BarChartOutlined,
    SettingOutlined,
    InfoCircleOutlined,
    BookTwoTone,
} from "@ant-design/icons-vue";
export default {
    components: {
        DollarCircleOutlined,
        PlusOutlined,
        BarChartOutlined,
        SettingOutlined,
        InfoCircleOutlined,
        BookTwoTone,
    },
    setup() {
        // 菜单数据
        let sideData = [
            {
                menuName: "我的账单",
                icon: "DollarCircleOutlined",
                to: "/billMain",
            },
            {
                menuName: "数据分析",
                icon: "BarChartOutlined",
                to: "/analysis",
            },
            {
                menuName: "设置",
                icon: "SettingOutlined",
                to: "/setting",
            },
            {
                menuName: "关于",
                icon: "InfoCircleOutlined",
                to: "/about",
            },
        ];
        return {
            selectPath: "/billMain",
            sideData,
        };
    },
    watch: {
        $route(to) {
            this.selectPath = to.path;
        },
    },
};
</script>

<style scoped>
/*盒子css*/
.divStyle:after {
    content: "";
    display: block;
    clear: both;
}
.divSelect1 {
    background-color: rgba(0, 188, 255, 0.16);
    margin-top: 26px;
    border-radius: 5px;
}
.divSelect2 {
    /* background-color: rgba(0, 188, 255, 0.16); */
    margin-top: 26px;
    border-radius: 5px;
}
.divSelect2:hover {
    background-color: rgba(166, 166, 166, 0.16);
    margin-top: 26px;
    border-radius: 5px;
}
/*普通标签*/
.imgStyle {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
    float: left;
    margin-right: 30px;
}
.userNameStyle {
    float: left;
    margin-top: 25px;
    font-size: 22px;
    font-weight: 600;
}
.iconStyle :deep(.anticon) {
    margin-left: 10px;
    font-size: 24px;
    float: left;
    margin-right: 40px;
    color: rgba(15, 23, 42, 0.65);
}
.iconP {
    font-size: 14px;
    float: left;
}
.pStyle {
    margin: 0;
    color: rgba(15, 23, 42, 0.65);
    font-weight: 600;
}
</style>
